<template>
    <div v-if="pageflag">
        <div class="chart-container">
            <Echart id="charts_rlt" :options="options" class="left_center_inner" ref="charts" height="300px" />
            <!-- 底座背景 -->
            <!-- <div class="bg"></div> -->
        </div>
    </div>
    <Reacquire v-else @onclick="getData" style="line-height: 300px">
        重新获取
    </Reacquire>
</template>

<script>
import { currentPOST } from 'api/modules';
import { colorsA, colorsB, legend, xAxis, yAxis } from '@/config/EChartVar';
import { getPie3D, getParametricEquation } from '@/utils/chart'; //工具类js，页面路径自己修改
import { graphic } from 'echarts';

export default {
    data() {
        return {
            options: {},
            optionData: [
                {
                    name: '0-4点',
                    value: 22,
                    itemStyle: {
                        color: '#25989D',
                    },
                },

                {
                    name: '4-8点',
                    value: 36,
                    itemStyle: {
                        color: '#134C84',
                    },
                },
                {
                    name: '8-12点',
                    value: 14,
                    itemStyle: {
                        color: '#EF8035',
                    },
                },
                {
                    name: '12-16点',
                    value: 36,
                    itemStyle: {
                        color: '#9FD7F4',
                    },
                },
                {
                    name: '16-20点',
                    value: 28,
                    itemStyle: {
                        color: '#F6CE62',
                    },
                }, {
                    name: '20-24点',
                    value: 28,
                    itemStyle: {
                        color: '#F6CE62',
                    },
                },
            ],
            countUserNumData: {
                axisData: ['0-4点', '4-8点', '8-12点', '12-16点', '16-20点', '20-24点'],
                seriesData: [22, 36, 14, 36, 28, 28],
            },
            pageflag: true,
            timer: null,
        };
    },
    created() {
        this.getData();
    },
    mounted() { },
    beforeDestroy() {
        this.clearData();
    },
    methods: {
        clearData() {
            if (this.timer) {
                clearInterval(this.timer);
                this.timer = null;
            }
        },
        getData() {
            this.pageflag = true;
            this.init(this.countUserNumData);
        },
        //轮询
        switper() {
            if (this.timer) {
                return;
            }
            let looper = (a) => {
                this.getData();
            };
            this.timer = setInterval(
                looper,
                2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
            );
            let myChart = this.$refs.charts.chart;
            myChart.on('mouseover', (params) => {
                this.clearData();
            });
            myChart.on('mouseout', (params) => {
                this.timer = setInterval(
                    looper,
                    2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
                );
            });
        },
        init(currentData) {
            let axisData = currentData.axisData;
            let seriesData = [[...currentData.seriesData]];
            const options = {
                grid: {
                top: '10%',
                left: '4%',
                right: '4%',
                bottom: '12%',
                containLabel: true,
                },
                legend: {
                show: false,
                top: '0%',
                right: '9%',
                icon: 'rect',
                itemWidth: 12,
                itemHeight: 6,
                itemGap: 10,
                textStyle: legend.textStyle,
                data: ['票数'],
                },
                xAxis: {
                type: 'category', // 将 x 轴设置为数值轴
                // max: 8000,
                // min: 100,//
                // interval: 2000,
                data: axisData,
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false, // 不显示下切线
                },
                axisLabel: xAxis.axisLabel,
                axisLine: {
                    lineStyle: {
                    background: 'rgba(176, 215, 255, 0.4)',
                    },
                },
                },
                yAxis: {
                type: 'value',
                // data: axisData,
                // boundaryGap: false,
                axisLabel: yAxis.axisLabel,
                axisLine: {
                    show: false,
                    // interval: 1,
                    lineStyle: {
                    color: 'rgba(0,0,0,0.5)',
                    },
                },
                splitLine: {
                    show: true,
                    // interval: 1,
                    lineStyle: {
                    color: ['rgba(176, 215, 255, 0.2)'],
                    width: 1,
                    type: 'dashed',
                    },
                },
                axisTick: {
                    show: false,
                },
                },
                series: [],
            };
            const series = [
                {
                name: '票数',
                type: 'bar',
                barWidth: 30,
                // 动画配置s
                animation: true,
                animationDuration: 2000,
                animationEasing: 'quarticInOut',
                animationDelay: function (idx) {
                    return idx * 150;
                },
                backgroundStyle: {
                    color: 'rgba(21,136,209,0.2)',
                },
                smooth: false,
                showSymbol: true,
                data: seriesData[0],
                // itemStyle: {
                //   normal: {
                //     color: 'rgba(0,219,254, .7)',
                //   },
                // },
                itemStyle: {
                    normal: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 1,
                        x2: 0,
                        y2: 0,
                        colorStops: [
                        {
                            offset: 0,
                            color: 'rgba(103, 236, 228, 0.1)',
                        },
                        {
                            offset: 1,
                            color: '#00FEEE',
                        },

                        ],
                        globalCoord: false,
                    },
                    },
                },
                z: 0,
                },
            ];
            options.series = series;
            this.options = options;
        },
        init2(currentData) {
            let legend = {
                // orient: "horizontal",
                bottom: '0%',
                left: '10%',
                itemGap: 5,
                formatter: function (param) {
                    return param;
                },
            };
            // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
            const options = getPie3D(this.optionData, 0.8, 190, 25, 16, 0.9, legend);
            // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
            options.series.push({
                name: '货物品类占比', //自己根据场景修改
                backgroundColor: 'transparent',
                type: 'pie',
                label: {
                    show: true,
                    opacity: 1,
                    fontSize: 13,
                    lineHeight: 20,
                    formatter: "{d}%",
                },
                startAngle: -40, // 起始角度，支持范围[0, 360]。
                clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
                radius: ['20%', '50%'],
                // center: ['50%', '50%'],
                data: this.optionData,
                itemStyle: {
                    opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
                },
            });
            this.options = options;
        },
    },
};
</script>
<style lang="scss" scoped>
.chart-container {
    margin-top: 5px;
    position: relative;
    width: 100%;
    height: 50%;

    .left_center_inner,
    .bg {
        margin-left: -10px;
        width: 100%;
        height: 100%;
    }

    .left_center_inner {
        top: -35px;
        z-index: 1;
    }

    .bg {
        position: absolute;
        bottom: 68px;
        left: 51%;
        // z-index: -1;
        width: 270px;
        height: 185px;
        background: no-repeat center;
        background-image: url('../../../assets/img/launch/pie_bg.png');
        background-size: 100% 100%;
        transform: translateX(-50%);
    }
}
</style>